<template>
	<div :class="status?'big_box1':'big_box'">
		<div :class="status?'big_box2':''">
			<div class="box1">
				<div>角色名称：</div>
				<el-input class="iut1" placeholder="输入角色名称"></el-input>
				<el-button type="primary" icon="el-icon-search">查询</el-button>
				<el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
			</div>
			<div class="box2">
				<el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加用户</el-button>
				<el-button type="primary" icon="el-icon-download">导出</el-button>
				<el-button type="primary" icon="el-icon-upload2">导入</el-button>
			</div>
			<div class="box3">
				已选择<span class="fot1">0</span>项
				<span class="fot1" style="margin-left: 30px;">清空</span>
			</div>
			<el-table
				@row-click="dj()"
				border=true
			    ref="multipleTable"
			    :data="tableData"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
			    <el-table-column prop="name" label="角色编码"></el-table-column>
				<el-table-column prop="name" label="角色名称"></el-table-column>
				<el-table-column prop="name" label="创建时间" sortable></el-table-column>
				<el-table-column  label="操作" width="100">
					<template slot-scope="scope">
						<div class="caozuo">
							<div>编辑</div>
							<div class="line2">|</div>
							<div>
								<el-dropdown>
								  <span class="el-dropdown-link gd">
								    更多<i class="el-icon-arrow-down el-icon--right"></i>
								  </span>
								  <el-dropdown-menu slot="dropdown">
								    <el-dropdown-item>黄金糕</el-dropdown-item>
								    <el-dropdown-item>狮子头</el-dropdown-item>
								    <el-dropdown-item>螺蛳粉</el-dropdown-item>
								    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
								    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
								  </el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</template>
				</el-table-column>
			  </el-table>
			  <div class="pagination"><el-pagination layout="prev, pager, next" :total="1000"></el-pagination></div>
		</div>
		<div v-if="status" class="big_box2">
			<div class="close"><i @click="close()" class="el-icon-circle-close"></i></div>
			<div class="box1">
				<div>用户账号：</div>
				<el-input class="iut1" placeholder="输入角色名称"></el-input>
				<el-button type="primary" icon="el-icon-search">查询</el-button>
				<el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
			</div>
			<div class="box2">
				<el-button type="primary" icon="el-icon-plus">用户录入</el-button>
				<el-button type="primary" icon="el-icon-plus">添加已有用户</el-button>
			</div>
			<div class="box3">
				已选择<span class="fot1">0</span>项
				<span class="fot1" style="margin-left: 30px;">清空</span>
			</div>
			<el-table
				@row-click="dj()"
				border=true
			    ref="multipleTable"
			    :data="tableData"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
			    <el-table-column prop="name" label="角色编码"></el-table-column>
				<el-table-column prop="name" label="角色名称"></el-table-column>
				<el-table-column prop="name" label="创建时间" sortable></el-table-column>
				<el-table-column  label="操作" width="100">
					<template slot-scope="scope">
						<div class="caozuo">
							<div>编辑</div>
							<div class="line2">|</div>
							<div>
								<el-dropdown>
								  <span class="el-dropdown-link gd">
								    更多<i class="el-icon-arrow-down el-icon--right"></i>
								  </span>
								  <el-dropdown-menu slot="dropdown">
								    <el-dropdown-item>黄金糕</el-dropdown-item>
								    <el-dropdown-item>狮子头</el-dropdown-item>
								    <el-dropdown-item>螺蛳粉</el-dropdown-item>
								    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
								    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
								  </el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>
					</template>
				</el-table-column>
			  </el-table>
		</div>
		
		
		
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				status:0,
				tableData: [{
				          date: '2016-05-03',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-02',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-04',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-01',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-08',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-06',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-07',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }],
			}
		},
		methods: {
			close:function(){
				this.status = 0
			},
			dj:function(row, column, event){
				this.status = 1
			}
		}
	}
</script>

<style scoped>
	.close{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 30px;
		font-size: 26px;
	}
	.gd{
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
	}
	.caozuo{
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
		font-family: Roboto;
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 43px 0;
	}
	.fot1{
		color: #1890ff;
		margin: 0 5px;
	}
	.box3{
		background-color: #e6f7ff;
		border: 1px solid #91d5ff;
		color: rgba(0,0,0,.65);
		font-size: 14px;
		padding: 8px 15px 8px 37px;
		border-radius: 4px;
		margin-bottom: 20px;
	}
	.box2{
		margin-bottom: 20px;
	}
	.iut1{
		width: 40%;
		margin: 0 20px;
	}
	.box1 :nth-child(1){
		white-space: nowrap;
	}
	.box1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30px;
	}
	.big_box2{
		width: 49.8%;
		padding: 24px 32px;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.big_box1{
		display: flex;
		justify-content: space-between;
		background: #f9f9f9;
	}
</style>
